<template>
    <div class="animated fadeIn" id="app" style="overflow: hidden">
        <!--    这里加一层是为了防止宽度和浏览器自适应掉下来    -->
        <!--        width1700-->

        <div style="width: 100%">
            <!--            头部开始-->
            <IndexTop></IndexTop>

        </div>
        <!--        头部结束-->
        <!--        导航开始-->
        <IndexHeader></IndexHeader>
        <!--        导航结束-->
        <!--        轮播图开始-->
        <div class="swiper" style=";height: 479px;width: 100%">
            <div style="height: 100%">
                <el-carousel height="460px" indicator-position="outside">
                    <el-carousel-item
                            :indicator-position="none"

                            v-for="item in 4" :key="item">
                        <h3 class="typo" style=";color: #fff;font-size: 40px">{{ item }} travel</h3>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <!--        轮播图结束-->
        <!--        城市分类-->
        <div class="animated fadeInUp">
            <div style="font-size: 36px;width: 100%;text-align: center;margin-top: 20px">
                城市
            </div>
            <!--            描述-->
            <div style="text-align: center">
                生活不止有眼前的苟且，也有诗和远方
            </div>
            <!--            图片-->
            <div class="animated fadeIn"
                 style="display: flex;justify-content: space-between;height: 300px;width: 1200px;margin: 0 auto;">
                <div v-for="item in cityList" class="head1"
                     style="position:relative;display: flex;flex-direction: column;justify-content: center">
                    <img class="head1-img" style="height: 243px" :src="item.img" alt="">
                    <div class="" style="">
                        <div class="ziti1" style="margin-left: 10px;margin-top: 8px;">{{item.name}}</div>
                        <div class="bar1" style="bottom: 0px;position: absolute;width:360px;height:6px;">
                            <div class="bar1-in" style=""></div>

                        </div>
                    </div>
                </div>


            </div>
        </div>
        <!--        城市分类更多-->
        <div class="more1" style="cursor: pointer;margin-top: 40px;display: flex;justify-content: center;width: 100%">
            <router-link to="/route" style="text-decoration: none">
                <div style="display: flex;align-items: center;border-radius: 6px;padding: 5px 60px;height: 40px;border: 2px solid #EBEBEB">
                    查看更多
                </div>
            </router-link>

        </div>
        <!--        目的地开始-->
        <div v-if="tabshow01" :class="{'animated fadeInLeft':tabshow01}" class="destination "
             style="align-items: center;justify-content: space-between;display: flex;height: 51px;width: 1200px;margin: 0 auto;margin-top: 60px">
            <div style="width: 63px;height: 51px;line-height: 51px;font-size: 19px;border-bottom: 2px solid #17C9D2">
                目的地
            </div>
            <div class="destination-list" style="width: 50%;display: flex;justify-content: space-around">
                <div class="destination-list-item" style="padding: 5px 20px">全部</div>
                <!--                <div class="destination-list-item" style="padding: 5px 20px">境外旅游</div>-->
                <!--                <div class="destination-list-item" style="padding: 5px 20px">境内旅游</div>-->
                <!--                <div class="destination-list-item" style="padding: 5px 20px">定制旅游</div>-->
                <!--                <div class="destination-list-item" style="padding: 5px 20px">特惠旅游</div>-->
            </div>
        </div>
        <!--        目的地结束-->
        <!--            目的详情开始 h 303 -->
        <div v-if="tabshow01" :class="{'animated fadeInLeft':tabshow01}" class="destination-detail "
             style="width: 1200px;margin:0 auto;height:333px;margin-top: 36px;">
            <!--            <div class="head1"-->
            <!--                 style="background-color: pink;height: 100%;position:relative;display: flex;flex-direction: column;justify-content: center">-->
            <!--                <img class="head1-img" style="height: 243px" src="../assets/img/1522812473.jpg" alt="">-->
            <!--111-->
            <!--            </div>-->
            <div style="height: 100%;width: 100%;display: flex;justify-content: space-around">
                <!--                        <h3 class="medium">{{ item }}</h3>-->

                <!--                width306-->
                <div @click="toDetail(item.id)" v-for="item in destincationList" class="destination-detail-item"
                     style="padding-bottom: 20px;width: 356px;display: flex;justify-content: center;flex-direction: column;align-items: center">
                    <el-image class="destination-detail-item-img" fit="cover" style="width: 100%;height: 191px"
                              :src="item.img"
                              alt="">
                    </el-image>
                    <div class="destination-detail-bottom" style=";padding: 10px 16px;">
                        <div style="text-align: center"><h3 id="title">{{item.name}}</h3></div>
                        <div style="font-size: 14px">
                            {{item.description}}
                        </div>
                    </div>
                </div>

            </div>

        </div>
        <!--        目的地结束-->
        <!--        目的地查看更多开始-->
        <div v-if="tabshow01" :class="{'animated fadeInLeft':tabshow01}" class="destination-more"
             style="margin-top: 13px;height: 37px;display: flex;justify-content: center">
            <router-link to="/route" style="text-decoration: none">

        <span class="destinctionMore" style="cursor: pointer;padding: 5px 14px;color:#0FC7D1;border:1px solid #18C9D2">            查看更多
            <i class="el-icon-arrow-right"></i>
</span>
            </router-link>
        </div>
        <!--        目的地查看更多结束-->
        <!--        酒店开始开始-->
        <br>
        <br>
        <br>
        <div v-if="tabshow02" :class="{'animated fadeInUp':tabshow02}" style="text-align: center;margin-top: 100px">
            <h1>特色酒店</h1>
        </div>
        <div v-if="tabshow02" :class="{'animated fadeInUp':tabshow02}"
             style="text-align: center;margin-top: 10px;margin-bottom: 20px">
            精选全球**优质机票、酒店、邮轮等旅行产品
        </div>
        <!--        1460-->
        <div v-if="tabshow02" :class="{'animated fadeInUp':tabshow02}"
             style="flex-wrap: wrap;padding: 10px 20px;width: 1560px;margin: 0 auto;display: flex;justify-content: space-between">
            <div v-for="item in hotelList" class="jiudian"
                 style="padding: 10px 20px;width: 700px;display: flex;flex-direction: column">
                <el-image fit="cover" style="cursor: pointer;width: 700px;height: 500px"
                          :src="item.img"
                          alt="">
                </el-image>
                <div style="">
                    <div style="padding: 20px 30px">
                        <div @click="toDetail(item.id)" style="cursor: pointer;margin-bottom: 10px"><h2
                                class="jiudian-h2">{{item.name}}</h2></div>
                        <div style="color: #999999">
                            {{item.description}}
                        </div>
                    </div>
                    <div class="jiantou"
                         style="color: #ECE3DE;height: 29px;width: 29px;border: 1px solid #ECE3DE;text-align: center">
                        <i class="el-icon-arrow-right"></i>
                    </div>
                </div>
            </div>


        </div>
        <!--        酒店结束-->

        <br>
        <br>
        <br>
        <!--        关于我们开始-->
        <div class="travel"
             style="border-bottom: 1px solid #EAEAEA;width: 1200px;margin: 0 auto;height: 50px;line-height: 50px">
            <div style="font-size: 20px;border-bottom: 1px solid #4AB344;width: 40px">
                旅游
            </div>
        </div>
        <div v-if="tabshow03" :class="{'animated zoomIn':tabshow03}"
             style="display: flex;width: 1200px;margin: 0 auto;justify-content: space-between">
            <div
                    style="margin-top: 20px;width: 270px;text-align: center;padding: 15px 15px">
                <div style="font-size: 60px">01</div>
                <p>旅游定制</p>
                <p>团队不断的为用户提供更多更快捷实用的功能与服务。</p>
                <!--                <p></p>-->
            </div>
            <div
                    style="margin-top: 20px;width: 270px;text-align: center;padding: 15px 15px">
                <div style="font-size: 60px">02</div>
                <p>航班信息</p>
                <p>有点甜旅游网在线预订功能使。</p>
                <p>游客可以简单快捷的实现旅游线路的</p>
                <p>在线预订以及在线支付操作</p>
                <!--                <p></p>-->
            </div>
            <div style="margin-top: 20px;width: 270px;text-align: center;padding: 15px 15px">
                <div style="font-size: 60px">03</div>
                <p>旅游地点</p>
                <p>各种出游!有点甜旅游网，高。</p>
                <p>品质出游，夏季您不容</p>
                <p>错的精彩折扣!快来预订吧!</p>
                <!--                <p></p>-->
            </div>
            <div
                    style="margin-top: 20px;width: 270px;text-align: center;padding: 15px 15px">
                <div style="font-size: 60px">04</div>
                <p>酒店门票</p>
                <p>区域攻略到特色主题，应有尽有</p>
                <p>多平台价格对比，天天专享优惠</p>
                <p>超过100万真实用户点评和游记</p>
                <!--                <p></p>-->
            </div>
        </div>
        <br>
        <br>
        <br>
        <div class="about" style="position: relative;height: 705px;width: 100%">
            <div v-if="tabshow04" :class="{'animated fadeInUp':tabshow04}"
                 style="padding-top: 30px;left: 900px;top: 100px;position: absolute;width: 667px">
                <div style="font-size: 25px;color: #ffffff">我们的服务　/ Our service</div>
                <div style="margin-top: 10px;color: #ffffff">
                    旅行不是一次出行，也不只是一个假期。旅行是一个过程，一次发现。是一个自我发现的过程。真正的旅行让我们直面自我。旅行不仅让我们看到世界，更让我们看到自己在其中的位置。
                </div>
                <div style="margin-top: 15px;color: #ffffff">· 高效快捷的提供商系统应用，聚集了2000+家各地的供应商</div>
                <div style="margin-top: 15px;color: #ffffff">· 资源丰富，超过200万条旅游路线供你选择</div>
                <div style="margin-top: 15px;color: #ffffff">· 八大核心保障， 选我们更放心</div>
                <div style="margin-top: 15px;color: #ffffff">· 我们与旅游战略品牌联盟，合作了很多很多战略伙伴</div>
            </div>
        </div>
        <br>
        <br>
        <br>
        <!--        关于我们结束-->
        <!--        旅游故事开始-->
        <div>
            <div v-show="tabshow05" :class="{'animated fadeInUp':tabshow05}" style="width: 1200px;margin: 0 auto;">
                <div style="margin-bottom: 20px;font-size: 20px">旅游故事</div>


                <div v-for="item in storyList" style="height: 152px;width: 100%;display: flex">
                    <div style="width: 212px;height: 136px;display: flex;justify-content: center;align-items: center">
                        <el-image
                                class="story-img"

                                :src="item.img"
                                style="width: 100%;height: 100%">

                        </el-image>
                    </div>
                    <div style="display: flex;justify-content: space-between">
                        <div style="margin-left: 20px;width: 800px;padding-right: 40px;box-sizing: border-box">
                            <div @click="toDetailStory(item.id)" class="story">{{item.title}}</div>
                            <div>{{item.description}}</div>

                        </div>
                        <div class="story-time" style="text-align: center;margin-left: 50px">{{item.formatTime}}</div>
                    </div>
                </div>
            </div>
        </div>
        <!--        旅游故事结束-->
        <br>
        <br>
        <!--        底部开始-->
        <div style="height: 200px;background-color: #26BE60;width: 100%;display: flex;justify-content: center;align-items: center">
            <div style="width: 1200px;margin:0 auto;display: flex">
                <img style="margin-left: 20px" src="../assets/img/AD0IuIW1BhAEGAAgh6T2ygUo_IGT8QYwkAE4kAE.png.webp"
                     alt="">
                <div v-if="scrollTopNum06" :class="{'animated fadeInUp':tabshow06}"
                     style="margin-left: 50px;margin-top: 30px">
                    <p style="font-size: 19px;color: #ffffff">来一次说走走的旅行吧！</p>
                    <p style="color:#ffffff;">旅行是一个过程，一次发现。是一个自我发现的过程。真正的旅行让我们直面自我。</p>
                </div>
            </div>
        </div>
        <Foot></Foot>
        <!--        底部结束-->
    </div>
</template>

<script>
    import Foot from "../components/bottom/Foot";
    import IndexTop from "../components/top/IndexTop";
    import IndexHeader from "../components/top/IndexHeader";

    export default {
        components: {
            IndexHeader,
            IndexTop,
            Foot
        },
        created() {
            this.getIndexInfo();
        },
        name: "Index",
        watch: {
            scrollTopNum01: function () {
                // console.log(this.scrollTopNum01)
                if (this.scrollTopNum01 > 600) {
                    this.tabshow01 = true;
                }
            },
            scrollTopNum02: function () {
                // console.log(this.scrollTopNum02)
                if (this.scrollTopNum02 > 1282) {
                    this.tabshow02 = true;
                }
            },
            scrollTopNum03: function () {
                console.log(this.scrollTopNum03)
                if (this.scrollTopNum03 > 3058) {
                    this.tabshow03 = true;
                }
            },
            scrollTopNum04: function () {
                if (this.scrollTopNum04 > 3614) {
                    this.tabshow04 = true;
                }
            },
            scrollTopNum05: function () {
                if (this.scrollTopNum05 > 4100) {
                    this.tabshow05 = true;
                }
            },
            scrollTopNum06: function () {
                if (this.scrollTopNum06 > 4615) {
                    this.tabshow06 = true;
                }
            },
        },
        methods: {
            toDetail(id) {
                this.$router.push({
                    query: {
                        id: id
                    },
                    path: '/detail'
                })
            },
            toDetailStory(id) {
                this.$router.push({
                    query: {
                        id: id
                    },
                    path: '/storydetail'
                })
            },
            async getIndexInfo() {
                let form = {
                    destination: '目的地',  // 这里定制化,就是根据分类的名称来选择对应的商品展示
                    hotel: '酒店'
                }
                let {data: res} = await this.$http.post('/index', form);
                console.log(res);
                this.cityList = res.data.cityList;
                this.destincationList = res.data.destincationList;
                this.hotelList = res.data.hotelList
                this.storyList = res.data.storyList
            },
            toLogin() {
                this.$router.push("/login")
            },
            handleScroll() {
                let top =
                    document.documentElement.scrollTop ||
                    document.body.scrollTop ||
                    window.pageYOffset;
                this.scrollTopNum01 = top;
                this.scrollTopNum02 = top;
                this.scrollTopNum03 = top;
                this.scrollTopNum04 = top;
                this.scrollTopNum05 = top;
                this.scrollTopNum06 = top;


            }

        }, data() {
            return {
                hotelList: [],
                scrollTopNum01: "",//页面滚动的高度
                tabshow01: false,//是否进行某种操作
                scrollTopNum02: "",//页面滚动的高度
                tabshow02: false,//是否进行某种操作
                scrollTopNum03: "",//页面滚动的高度
                tabshow03: false,//是否进行某种操作
                scrollTopNum04: "",//页面滚动的高度
                tabshow04: false,//是否进行某种操作
                scrollTopNum05: "",//页面滚动的高度
                tabshow05: false,//是否进行某种操作
                scrollTopNum06: "",//页面滚动的高度
                tabshow06: false,//是否进行某种操作
            }
        },
        mounted() {
            window.addEventListener("scroll", this.handleScroll, true);
        },
    }
</script>

<style lang="less">
    .story-img {
        cursor: pointer;
    }

    .story {
        cursor: pointer;
        transition: all 0.5s;
    }

    .story:hover {
        color: #26BE60 !important;
    }

    .story-time {
        transition: all 0.5s;
    }

    .story-time:hover {
        color: #26BE60 !important;

    }

    .about {
        background-image: url("../assets/img/aboutmejpg.jpg");
        background-repeat: no-repeat;
    }

    .jiudian {
        border: 0 !important;
        transition: all 0.7s;
    }

    .jiantou {
        transition: all 0.4s;
    }

    .jiudian:hover .jiantou {
        transform: translateX(650px);
        color: #49B1F5 !important;
        border: 1px solid #49B1F5 !important;
    }

    .jiudian-h2 {
        transition: all 0.4s;
    }

    .jiudian:hover .jiudian-h2 {
        color: #0FC7D1 !important;
    }

    .jiudian:hover {
        border: 1px solid #DBDBDB;
        box-shadow: 2px 3px 4px 5px #DBDBDB;
    }

    .destinctionMore {
        transition: all 0.5s;
    }

    .destinctionMore:hover {
        background-color: #0FC7D1;
        color: #ffffff !important;
    }

    .destination-detail-item {
        cursor: pointer;
        overflow: hidden;
    }

    .destination-detail-item-img {
        transition: all 0.5s;
    }

    .destination-detail-item:hover .destination-detail-item-img {
        transform: scale(1.1);
    }

    .destination-detail-bottom {
        transition: all 0.5s;
    }

    .destination-detail-item:hover #title {
        color: #ffffff !important;

    }

    .destination-detail-item:hover .destination-detail-bottom {
        /*background-color: #1CBBB4;*/
        color: #ffffff !important;
        background-color: #18C9D2 !important;
    }

    .destination-list-item {
        transition: all 0.5s;
        cursor: pointer;
    }

    .destination-list-item:hover {
        background-color: #17C9D2;
    }

    .more1 div {
        transition: all 0.6s;
    }

    .more1:hover div {
        color: #ffffff !important;
        background-color: #17C9D2;
    }

    /deep/ .el-carousel__button {
        background-color: #1D9BFF;
        height: 5px;
    }

    .head1-img {
        overflow: hidden;
        transform: rotate(deg);
        cursor: pointer;
    }

    /*.el-carousel__item h3 {*/
    /*    color: #475669;*/
    /*    font-size: 18px;*/
    /*    opacity: 0.75;*/
    /*    line-height: 300px;*/
    /*    margin: 0;*/
    /*}*/

    /*.el-carousel__item:nth-child(2n) {*/
    /*    background-color: #99a9bf;*/
    /*}*/

    /*.el-carousel__item:nth-child(2n+1) {*/
    /*    background-color: #d3dce6;*/
    /*}*/
    .swiper {
        background-image: url("../assets/swiper/swiper01.jpg");
        background-color: #49B1F5;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .bar1-in {
        transition: all 0.9s;
        width: 0;
        height: 100%;
        background-color: #1CBBB4;

    }

    .head1:hover .bar1-in {
        background-color: #1CBBB4;
        height: 100%;
        width: 100%;
    }

    .zi {
        transition: all 0.7s;

    }

    .head1:hover .zi {
        color: #1CBBB4 !important;

    }


    .head1-bottom {
        box-sizing: border-box;
    }

    .head1:hover .head1-bottom {
        /*background-color: pink;*/
        border: 3px solid #F2F2F2;
        border-top: 0;
        box-shadow: 2px 3px 4px #F4F4F4;

    }

    .head1-img {
        transition: all 0.5s;

    }

    .head1 {
        overflow: hidden;
    }

    .head1:hover .head1-img {
        background-color: pink;
        transform: scale(1.1);
    }

    .ziti1 {
        transition: all 0.6s;
    }

    .head1:hover .ziti1 {
        color: #0FC7D1 !important;
    }

    .login {
        cursor: pointer;
        transition: all 0.5s;
    }

    .login:hover {
        color: #1ABC9C;
    }

    .register {
        cursor: pointer;
        transition: all 0.5s;
    }

    .register:hover {
        color: #1ABC9C;
    }

</style>